import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls';
import * as THREE from 'three';
export default class Crossroads {
    constructor(dom) {
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        this.renderer = new THREE.WebGLRenderer({
            antialias: true
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setPixelRatio(window.devicePixelRatio);
        this.camera.position.set(0, 0, 100);
        this.camera.lookAt(0, 0, 0);
        this.camera.position.z = 5;
        dom.appendChild(this.renderer.domElement);


        // 实例代码

        const geometry = new THREE.BufferGeometry();
        // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
        // 因为在两个三角面片里，这两个顶点都需要被用到。
        const vertices = new Float32Array([
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0,

            1.0, 1.0, 1.0, // 右上
            -1.0, 1.0, 1.0,
            -1.0, -1.0, 1.0
        ]);

        // itemSize = 3 因为每个顶点都是一个三元组。
        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
        const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        const mesh = new THREE.Mesh(geometry, material);
        this.scene.add(mesh);

        new OrbitControls(this.camera, this.renderer.domElement); // 控制器
        const axesHelper = new THREE.AxesHelper(5000); // 辅助线
        this.scene.add(axesHelper);



        this.render();
    }

    render() {
        window.requestAnimationFrame(() => this.render());
        this.renderer.render(this.scene, this.camera);
    }
}